<div class="workflow-step-container">
  <div class="step-header">
    <h3>{{ getStepTitle() }}</h3>
    <div class="repair-info">
      <span class="device-info">
        <strong>设备：</strong>{{ workflowInstance.repairRequest.device?.name }} 
        ({{ workflowInstance.repairRequest.device?.serialNumber }})
      </span>
      <span class="priority-badge" [class]="'priority-' + workflowInstance.repairRequest.priority">
        {{ getRepairPriorityText() }}
      </span>
    </div>
  </div>

  <div class="step-content">
    <div class="repair-description">
      <h4>故障描述</h4>
      <p>{{ workflowInstance.repairRequest.description }}</p>
    </div>

    <form [formGroup]="stepForm" (ngSubmit)="onSubmit()" class="step-form">
      <!-- 决策步骤 -->
      <div *ngIf="workflowInstance.currentStep === 'DecisionPending'" class="form-section">
        <h4>维修方式决策</h4>
        
        <div class="form-group">
          <label class="form-label">是否委托外部维修？ *</label>
          <div class="radio-group">
            <label class="radio-option">
              <input type="radio" formControlName="isExternalRepair" [value]="true">
              <span class="radio-label">是，委托外部维修</span>
            </label>
            <label class="radio-option">
              <input type="radio" formControlName="isExternalRepair" [value]="false">
              <span class="radio-label">否，内部维修</span>
            </label>
          </div>
          <div class="error-message" *ngIf="isFieldInvalid('isExternalRepair')">
            {{ getFieldError('isExternalRepair') }}
          </div>
        </div>

        <div class="form-group">
          <label for="reason" class="form-label">决策理由 *</label>
          <textarea 
            id="reason" 
            formControlName="reason" 
            class="form-control"
            [class.invalid]="isFieldInvalid('reason')"
            rows="3"
            placeholder="请说明选择此维修方式的理由...">
          </textarea>
          <div class="error-message" *ngIf="isFieldInvalid('reason')">
            {{ getFieldError('reason') }}
          </div>
        </div>
      </div>

      <!-- 外部厂商选择 -->
      <div *ngIf="workflowInstance.currentStep === 'ExternalVendorForm'" class="form-section">
        <h4>选择外部维修厂商</h4>
        
        <div class="form-group">
          <label for="externalVendorId" class="form-label">维修厂商 *</label>
          <select 
            id="externalVendorId" 
            formControlName="externalVendorId" 
            class="form-control"
            [class.invalid]="isFieldInvalid('externalVendorId')">
            <option value="">请选择维修厂商</option>
            <option *ngFor="let vendor of externalVendors" [value]="vendor.id">
              {{ vendor.companyName }} - {{ vendor.contactPerson }} ({{ vendor.contactPhone }})
            </option>
          </select>
          <div class="error-message" *ngIf="isFieldInvalid('externalVendorId')">
            {{ getFieldError('externalVendorId') }}
          </div>
        </div>

        <div class="vendor-details" *ngIf="stepForm.get('externalVendorId')?.value">
          <div class="selected-vendor" *ngFor="let vendor of externalVendors">
            <div *ngIf="vendor.id == stepForm.get('externalVendorId')?.value" class="vendor-card">
              <h5>{{ vendor.companyName }}</h5>
              <p><strong>联系人：</strong>{{ vendor.contactPerson }}</p>
              <p><strong>电话：</strong>{{ vendor.contactPhone }}</p>
              <p><strong>邮箱：</strong>{{ vendor.contactEmail }}</p>
              <p><strong>地址：</strong>{{ vendor.address }}</p>
              <p *ngIf="vendor.notes"><strong>备注：</strong>{{ vendor.notes }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 内部维修工单 -->
      <div *ngIf="workflowInstance.currentStep === 'InternalRepairForm'" class="form-section">
        <h4>内部维修工单</h4>
        
        <div class="form-group">
          <label for="repairPlan" class="form-label">维修计划 *</label>
          <textarea 
            id="repairPlan" 
            formControlName="repairPlan" 
            class="form-control"
            [class.invalid]="isFieldInvalid('repairPlan')"
            rows="4"
            placeholder="请详细描述维修计划和步骤...">
          </textarea>
          <div class="error-message" *ngIf="isFieldInvalid('repairPlan')">
            {{ getFieldError('repairPlan') }}
          </div>
        </div>

        <div class="form-group">
          <label for="estimatedHours" class="form-label">预计维修时间（小时）*</label>
          <input 
            type="number" 
            id="estimatedHours" 
            formControlName="estimatedHours" 
            class="form-control"
            [class.invalid]="isFieldInvalid('estimatedHours')"
            min="1"
            step="0.5"
            placeholder="例如：4">
          <div class="error-message" *ngIf="isFieldInvalid('estimatedHours')">
            {{ getFieldError('estimatedHours') }}
          </div>
        </div>

        <div class="form-group">
          <label for="notes" class="form-label">备注</label>
          <textarea 
            id="notes" 
            formControlName="notes" 
            class="form-control"
            rows="2"
            placeholder="其他需要说明的事项...">
          </textarea>
        </div>
      </div>

      <!-- 维修详情 -->
      <div *ngIf="workflowInstance.currentStep === 'RepairDetailsForm'" class="form-section">
        <h4>维修详情记录</h4>
        
        <div class="form-group">
          <label for="repairContent" class="form-label">维修内容 *</label>
          <textarea 
            id="repairContent" 
            formControlName="repairContent" 
            class="form-control"
            [class.invalid]="isFieldInvalid('repairContent')"
            rows="4"
            placeholder="请详细记录实际执行的维修内容...">
          </textarea>
          <div class="error-message" *ngIf="isFieldInvalid('repairContent')">
            {{ getFieldError('repairContent') }}
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="repairHours" class="form-label">实际耗时（小时）*</label>
            <input 
              type="number" 
              id="repairHours" 
              formControlName="repairHours" 
              class="form-control"
              [class.invalid]="isFieldInvalid('repairHours')"
              min="1"
              step="0.5"
              placeholder="例如：3.5">
            <div class="error-message" *ngIf="isFieldInvalid('repairHours')">
              {{ getFieldError('repairHours') }}
            </div>
          </div>

          <div class="form-group">
            <label for="repairCost" class="form-label">维修费用（元）*</label>
            <input 
              type="number" 
              id="repairCost" 
              formControlName="repairCost" 
              class="form-control"
              [class.invalid]="isFieldInvalid('repairCost')"
              min="0"
              step="0.01"
              placeholder="例如：1500.00">
            <div class="error-message" *ngIf="isFieldInvalid('repairCost')">
              {{ getFieldError('repairCost') }}
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="repairNotes" class="form-label">维修说明</label>
          <textarea 
            id="repairNotes" 
            formControlName="repairNotes" 
            class="form-control"
            rows="3"
            placeholder="维修过程中的注意事项、使用的备件、遇到的问题等...">
          </textarea>
        </div>
      </div>

      <!-- 审批步骤 -->
      <div *ngIf="workflowInstance.currentStep === 'ApprovalPending'" class="form-section">
        <h4>质量检查与审批</h4>
        
        <div class="repair-summary">
          <h5>维修总结</h5>
          <div class="summary-item">
            <strong>维修内容：</strong>
            <p>{{ workflowInstance.repairContent || '暂无记录' }}</p>
          </div>
          <div class="summary-row">
            <div class="summary-item">
              <strong>耗时：</strong>{{ workflowInstance.repairHours || 0 }}小时
            </div>
            <div class="summary-item">
              <strong>费用：</strong>¥{{ workflowInstance.repairCost || 0 }}
            </div>
          </div>
          <div class="summary-item" *ngIf="workflowInstance.repairNotes">
            <strong>维修说明：</strong>
            <p>{{ workflowInstance.repairNotes }}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">审批结果 *</label>
          <div class="radio-group">
            <label class="radio-option">
              <input type="radio" formControlName="isApproved" [value]="true">
              <span class="radio-label success">通过</span>
            </label>
            <label class="radio-option">
              <input type="radio" formControlName="isApproved" [value]="false">
              <span class="radio-label danger">不通过</span>
            </label>
          </div>
          <div class="error-message" *ngIf="isFieldInvalid('isApproved')">
            {{ getFieldError('isApproved') }}
          </div>
        </div>

        <div class="form-group">
          <label for="approvalNotes" class="form-label">审批意见</label>
          <textarea 
            id="approvalNotes" 
            formControlName="approvalNotes" 
            class="form-control"
            rows="3"
            placeholder="请填写审批意见、建议或不通过的原因...">
          </textarea>
        </div>
      </div>

      <!-- 错误提示 -->
      <div class="error-alert" *ngIf="error">
        <i class="fas fa-exclamation-triangle"></i>
        {{ error }}
      </div>

      <!-- 提交按钮 -->
      <div class="form-actions">
        <button 
          type="submit" 
          class="btn btn-primary"
          [disabled]="loading || stepForm.invalid">
          <i class="fas fa-spinner fa-spin" *ngIf="loading"></i>
          <span *ngIf="!loading">提交</span>
          <span *ngIf="loading">处理中...</span>
        </button>
      </div>
    </form>
  </div>
</div> 